<template>
  <div class="app-container">
    <el-card>
      <el-page-header @back="goBack">
        <template #content>
          <div class="flex items-center">
            <div v-if="!route.query?.id">工资列表明细</div>
            <div v-else>
              <span
                class="text-sm mr-2"
                style="color: var(--el-text-color-regular)"
              >
                员工编码:
              </span>
              <el-tag
                :type="
                  form.joinPositionStatus == 3
                    ? 'danger'
                    : form.joinPositionStatus == 2
                    ? 'warning'
                    : ''
                "
                >{{ form.code }}</el-tag
              >
            </div>
          </div>
        </template>
        <template #extra>
          <div class="flex items-center" v-if="!route.query.info">
            <el-button type="primary" @click="submitForm">保 存</el-button>
          </div>
        </template>
      </el-page-header>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-collapse v-model="activeNames">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
          <el-form-item label="报工单编号">
            <el-input
              v-model="queryParams.code"
              placeholder="报工单编号"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="Download"
              @click="handleExport"
              >导出</el-button
            >
          </el-col>
        </el-row>

        <el-table
          :data="postList"
          v-loading="loading"
          height="450"
          border
          show-summary
          style="width: 100%"
        >
          <el-table-column prop="id" v-if="colData[0].isfalse" label="id">
          </el-table-column>

<!--          <el-table-column-->
<!--            prop="workshopname"-->
<!--            v-if="colData[1].istrue"-->
<!--            label="车间"-->
<!--          >-->
<!--          </el-table-column>-->

          <el-table-column
              label="所属车间"
              min-width="100"
              align="center"
              prop="workshopname"
          >
            <template v-slot="{ row }">
              {{ getshworkshop(row.workshopname) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="code"
            v-if="colData[2].istrue"
            label="报工单编号"
          >
            <template v-slot="{ row }">
              <el-button type="primary" @click="handleView(row)" text>{{
                row.code
              }}</el-button>
            </template>
          </el-table-column>

          <el-table-column prop="name" v-if="colData[3].istrue" label="姓名">
          </el-table-column>

          <el-table-column
            prop="wagespiece"
            sortable
            v-if="colData[4].istrue"
            label="工资"
          >
          </el-table-column>

          <el-table-column
            prop="reportdate"
            sortable
            label="时间"
            v-if="colData[5].istrue"
          >
            <template v-slot="{ row }">
              {{ row.reportdate.split("T")[0] }}
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup name="Persiondetails">
import useTagsViewStore from "@/store/modules/tagsView";
import { getPersiondetailsList, exportUseList } from "@/api/repord/userrepord";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { downLoadBlob } from "@/utils/ruoyi";
import {getById} from "@/api/basicInfo/workbench.js";
const tagsViewStore = useTagsViewStore();
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { ems_machine_info_type, sys_user_sex,sh_workshop } = proxy.useDict(
    "ems_machine_info_type",
    "sys_user_sex",
    "sh_workshop"
);
const activeNames = ["1"];
const total = ref(0);
const data = reactive({
  form: {},
});

// colData中列出表格中的每一列，默认都展示
const colData = reactive([
  { title: "id", isfalse: false },
  { title: "车间", istrue: true },
  { title: "报工单编号", istrue: true },
  { title: "姓名", istrue: true },
  { title: "工资", istrue: true },
  { title: "时间", istrue: true },
]);

const { form, rules } = toRefs(data);
//  返回
const goBack = () => {
  tagsViewStore.delView(route);
  router.go(-1);
};
const postList = ref([]);

const queryParams = ref({
  pageNum: 1,
  pageSize: 50,
  year: undefined,
  month: undefined,
  day: undefined,
  name: undefined,
  code: undefined,
});


// 解决vue-route路由跳转同一页面时数据不会更新问题
watch(() =>route.query.name && route.query.day ,()=> {
  if(route.query.name|| route.query.day >0){
    queryParams.value.name = route.query.name;
    queryParams.value.month = route.query.month;
    queryParams.value.year = route.query.year;
    queryParams.value.day = route.query.day;
    load()
  }else {
    queryParams.value.name = route.query.name;
    queryParams.value.month = route.query.month;
    queryParams.value.year = route.query.year;
    load()
  }
})
function load(){
  getList()
}



onMounted(() => {
  queryParams.value.name = route.query.name;
  queryParams.value.month = route.query.month;
  queryParams.value.year = route.query.year;
  queryParams.value.day = route.query.day;

});
// 获取列表
const getList = async () => {
  try {
    // alert(queryParams.name.value)
    const response = await getPersiondetailsList(queryParams.value);
    postList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  } catch (error) {
    console.error(error);
    // 处理错误逻辑
  }
};
// 搜索按钮操作
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
// 在组件挂载后获取列表
onMounted(()=>{
  queryParams.value.day = route.query.day
  getList()
});

/** 重置按钮操作 */
function resetQuery() {
  // dateRange.value = [];
  // proxy.resetForm("queryRef");
  queryParams.value.code = undefined;

  // proxy.$refs.deptTreeRef.setCurrentKey(null);
  // handleQuery();
}

const getshworkshop = (row) => {
  const val = sh_workshop.value.find((item) => item.value == row);
  return val ? val.label : "";
};

// 查看
const handleView = (row) => {

  if(row.code.slice(0,2)=="ZD"){
    router.push({
      path: "/production/bindReport/bindReportDetails",
      query: {
        id: row.id,
        info: true,
      },
    });}else if(row.code.slice(0,2)=="QT"){
    router.push({
      path: "/production/otherReport/otherReportDetail",
      query: {
        id: row.id,
        info: true,
      },
    });
  }
else if(row.code.slice(0,2)=="CQ"){
  router.push({
    path: "/production/cuttingReport/detail",
    query: {
      id: row.id,
      info: true,
    },
  });
}
  else if(row.code.slice(0,2)=="FM"){
    router.push({
      path: "/production/coverReport/coverReportDetails",
      query: {
        id: row.id,
        info: true,
      },
    });
  }
  else if(row.code.slice(0,2)=="ZY"){
    router.push({
      path: "/production/foldingReport/foldReportDetails",
      query: {
        id: row.id,
        info: true,
      },
    });
  }
  else {
    router.push({
      path: "/repord/persion/printReportDetails",
      query: {
        id: row.id,
        info: true,
      },
    });
  }
};
// 导出
const handleExport = () => {
  exportUseList(queryParams.value).then((res) => {
    downLoadBlob(res, "工资列表");
  });
};
</script>

<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader :deep(.el-upload) {
  border: 1px dashed var(--el-border-color);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.upload-box .disabled :deep(.el-upload--picture-card) {
  display: none;
}

.upload-Signature .disabledSignature :deep(.el-upload--picture-card) {
  display: none;
}
</style>